<template>
	<view>
		<view class="box mt50 p30 u-flex ">
			<view class="u-flex u-row-between header">
				<text class="font-w600 title">{{info.meeting_name}}</text>
				<u-tag :text="info.status_text" mode="dark" />
			</view>
			<view class="foot mt10">
				<text>开始时间：{{info.start_time}}</text>
				<text>结束时间：{{info.end_time}}</text>
			</view>
		</view>
		<view class="u-flex u-flex-col" style="margin-top: 200rpx;">
			<template v-if="info.status==2">
				<view class="flex u-flex-col" style="justify-content: center;align-items: center;">
					<u-icon name="error-circle-fill" color="#c8c9cc" size="150"></u-icon>
					<text style="font-size: 34rpx;font-weight: bold;">会议已结束</text>
				</view>
			</template>
			<template v-else>
				<view class="" v-if="info.sign_status">
					<view class="flex u-flex-col" style="justify-content: center;align-items: center;">
						<u-icon name="checkmark-circle-fill" color="#18b566" size="150"></u-icon>
						<text style="font-size: 34rpx;font-weight: bold;">签到成功</text>
					</view>
				</view>
				<view v-else class="sign" :class="info.status==1?'bg-primary':'bg-info'" @click="signIn" >
					<text>签到</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:'',
				info:{}
			}
		},
		onLoad(e) {
			this.code =e.code?e.code:""
			this.getInfo()
		},
		methods: {
			getInfo(){
				this.$u.get('member/api.users/meetingInfo', {
					code: this.code
				}).then(res => {
					this.info =res.data
				})
			},
			signIn(){
				this.$u.get('member/api.users/signIn', {
					sign_code: this.code
				}).then(res => {
					this.getInfo()
					uni.showToast({
						icon:"success",
						title:res.msg
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/public/index'
						})
					},2000)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.bg-info{
		background-color: $u-type-info;
	}
	.bg-primary{
		background-color:$u-type-primary;
	}
	.sign{
		
		width: 280rpx;
		height: 280rpx;
		border-radius: 100%;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text{
			font-size: 60rpx;
			font-weight: bold;
			color:#fff;
		}
	}
	.box{
		width: 100%;
		flex-direction: column;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title{
			font-size: 34rpx;
		}
		.header{
			display: flex;
			width: 100%;
			align-items: center;
		}
		.foot{
			display: flex;
			width: 100%;
			color: $u-tips-color;
			flex-direction: column;
		}
	}
</style>
